import { FC, useEffect } from "react";
import { QuestionTextareaPropsType } from "./interface";
import { Form, Input } from "antd";
const PropComponent: FC<QuestionTextareaPropsType> = (
  props: QuestionTextareaPropsType
) => {
  const { title, placeholder, disabled, onChange } = props;

  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue({ title, placeholder });
  }, [title, placeholder, form]);

  function handleValuesChange() {
    // console.log(form.getFieldsValue());
    onChange?.(form.getFieldsValue());
  }

  return (
    <Form
      layout="vertical"
      initialValues={{ title, placeholder }}
      form={form}
      onValuesChange={handleValuesChange}
      disabled={disabled}
    >
      <Form.Item
        label="标题"
        name="title"
        rules={[{ required: true, message: "请输入标题" }]}
      >
        <Input></Input>
      </Form.Item>
      <Form.Item
        label="Placeholder"
        name="placeholder"
        rules={[{ required: true, message: "请输入Placeholder" }]}
      >
        <Input></Input>
      </Form.Item>
    </Form>
  );
};

export default PropComponent;
